	//右侧导航栏
	var needLogin = document.querySelectorAll('.fixed_bar .right_nav');
	for(var i=0;i<needLogin.length;i++){
		needLogin[i].onmouseenter = function(){
			animate(this.children[1],{'left':-78,'opacity':1,'display':'block'},20);
			this.children[0].style.backgroundColor = "#e32332";
		}
		needLogin[i].onmouseleave = function(){
			animate(this.children[1],{'left':-128,'opacity':0,'display':'none'},20);
			this.children[0].style.backgroundColor = "";
		}
	}

	//回到顶部按钮
	var right_goto = document.querySelectorAll('.fixed_bar .go_top');
		window.onscroll=function (e){
    		console.log(e.scrollTop);
		}

	//购物车
	var shoppingcar = document.querySelector('.f_right_shopping');
	var shoppingcarimg = document.querySelector('.f_right_shopping .text .icon');
	var shoppingnum = document.querySelector('.f_right_shopping .text .cartNum');
	var shoppinglist = document.querySelector('.f_right_shopping .shopping_list');
	var list_null = document.querySelector('.list_null');
	shoppingcar.onmouseenter = function(){
		animate(shoppinglist,{'height':100,'display':'block'},20);
		list_null.style.display = "block";
		this.children[0].style.background = "#e32332";
		this.children[0].style.color = "white";
		shoppingnum.style.color = "white";
		shoppingcarimg.style.background = "url(image/shopping/base.png) no-repeat -164px -38px";
	}
	shoppingcar.onmouseleave = function(){
		animate(shoppinglist,{'height':0,'line-height':0},20);
		list_null.style.display = "none";
		this.children[0].style.background = "";
		this.children[0].style.color = "";
		shoppingnum.style.color = "";
		shoppingcarimg.style.background = "url(image/shopping/base.png) no-repeat -164px -20px";
	}


	//头部全部商品
	var nav = document.querySelector('.f_left_allshop');
	var nav_text = document.querySelector('.f_left_allshop .text');
	var nav_ul = document.querySelector('.top_nav .f_left_allshop ul')
	nav.onmouseenter = function(){
		nav_ul.style.display = "block";
		this.style.backgroundColor = "#e32332";
		this.style.color = '#fff';
		// nav_text.children[0].className = "top_nav_current";
		nav_text.children[0].style.background = "url(image/shopping/base.png) no-repeat -39px 0";
	}
	nav.onmouseleave = function(){
		nav_ul.style.display = "none";
		this.style.backgroundColor = "";
		this.style.color = '';
		nav_text.children[0].style.background = "url(image/shopping/base.png) no-repeat -24px 0";
	}

	//头部所有商品内部内容
	var a_font = document.querySelectorAll('.ellipsis2');
	var lis = document.querySelectorAll('.lis');
	for(var i = 0;i<a_font.length;i++){
		lis[i].onmouseenter = function(){
			animate(this.children[1],{'height':this.children[1].children.length*40,'display':'block'},20);
		}
		lis[i].onmouseleave = function(){
			animate(this.children[1],{'height':0,'display':'none'},20);
		}
	}

	//搜索框
	var text = document.querySelector('.cf .text');
	var keyword = document.querySelector('.keyword');
	var bb = document.querySelector('.f_left_input .btn');
	var textarr = ["耳机",'哈哈','啧啧',"鼠标",'键盘'];
	// var keyword_list = document.querySelector('.keyword_list');
	var form = document.querySelector('.cf');
	text.onfocus = function(){
		keyword.style.display = "none";
		this.style.border = "2px solid #e32332";
		var keyword_list = document.getElementById('keyword_list');
		if(keyword_list){
			keyword_list.style.display = 'block';
		}
		this.onkeyup = function(){
			var keyword_list = document.getElementById('keyword_list');
			if(keyword_list){
				form.removeChild(keyword_list);
			}
			var txt = this.value;
			var newarr = [];
			for(var i=0;i<textarr.length;i++){
				if(textarr[i].indexOf(txt) == 0){
					newarr.push(textarr[i]);
				}
			}

			if(newarr.length == 0||this.value==""){
				return;
			}

			var box_list = document.createElement('div');
			box_list.id = "keyword_list";
			box_list.style.position = "absolute";
			box_list.top = "40px";
			box_list.left = "1px";
			box_list.width = "270px";
			box_list.style.border = "1px solid #ccc";
			box_list.style.backgroundColor = "#fff";
			form.appendChild(box_list);

			for(var i = 0;i<newarr.length;i++){
				var pp = document.createElement("p");
				pp.innerText = newarr[i];
				pp.style.display = "block";
				pp.style.padding = "0 10px";
				pp.style.height = '30px';
				pp.style.lineHeight = "30px";
				pp.style.color = "red";
				box_list.appendChild(pp);
			}

			var ps = document.getElementById('keyword_list').getElementsByTagName('p');
			for(var i=0;i<ps.length;i++){
				ps[i].onmouseenter = function(){
					this.style.backgroundColor = "#eee";
				}
				ps[i].onmouseleave = function(){
					this.style.backgroundColor = "";
				}
				ps[i].onclick = function(){
					text.value=this.innerText; 
					box_list.style.display = "none";
				}
			}

			bb.onclick = function(){
				if(text.value == "键盘"){
					window.open("keyboard.html",'_blank');
				}else if(text.value == "鼠标"){
					window.open("mouse.html",'_blank');
				}else if(text.value = "耳机"){
					window.open("earphone.html",'_blank');
				}
			}
		}
	}

	text.onblur = function(){
		var keyword_list = document.getElementById('keyword_list');
		if(this.value.length != 0){
			keyword.style.display = "none";
		}else{
			keyword.style.display = "block";
		}
		this.style.border = "";
		//keyword_list.style.display = 'block';
	}
	//e.target真正触发事件的对象 input
	//e.currentTarget 绑定事件的对象
	document.onclick = function (e) {
		var keyword_list = document.getElementById('keyword_list');
		if(keyword_list&&e.target.nodeName!='INPUT'){
			keyword_list.style.display = 'none';
		}
		
	}

	//右侧导航栏购物车
	var rightcar = document.querySelector('.fixed_cart_tip');
	var car = document.querySelector('.car');
	var cartNum = document.querySelector('.fixed_cart_tip .cartNum');
	rightcar.children[0].onmouseenter = function(){
		this.style.backgroundColor = "#e32332";
		car.style.background="url(image/shopping/base.png) no-repeat -164px -38px";
		cartNum.style.backgroundColor = "black";
	}
	rightcar.children[0].onmouseleave = function(){
		this.style.backgroundColor = "";
		car.style.background="url(image/shopping/base.png) no-repeat -184px -56px";
		cartNum.style.backgroundColor = "#e32332";
	}


	//中间轮播
	var inner = document.querySelector('.tempWrap');
	console.log(inner.offsetWidth);
	var imgWidth = inner.offsetWidth;
	var sps = document.querySelectorAll('.num span');
	console.log(sps);
	var uls = document.querySelector('.tempWrap ul');
	var focus = document.querySelector('.focus');
	var left = document.querySelector('.focus .left');
	var right = document.querySelector('.focus .right');

	var timer = null;
	timer = setInterval(rightS,2000);
	uls.appendChild(uls.children[0].cloneNode(true));

	inner.onmouseenter = function(){
		focus.style.display = "block";
		clearInterval(timer);
	}
	inner.onmouseleave = function(){
		focus.style.display = "none";
		timer = setInterval(rightS,2000);
	}

	for(var i = 0;i<focus.children.length;i++){
		focus.children[i].onmouseenter = function(){
			this.style.backgroundColor = "black"
		}
		focus.children[i].onmouseleave = function(){
			this.style.backgroundColor = ""
		}
	}

	//轮播左击
	var pic = 0;
	left.onclick = function(){
		if(pic == 0){
			pic = 3;
			uls.style.left = -pic*1366+"px";
		}
		pic--;
		lunboanimate(uls,-pic*1366);

		for(var k=0;k<sps.length;k++){
			sps[k].style.className = "";
		}
		sps[pic].className = "bgred";
	}

		//轮播右击
		right.onclick = rightS;
		function rightS(){
		if(pic == uls.children.length-1){
			pic = 0;
			uls.style.left = -pic * 1366 + "px";
		}
		pic++;
		lunboanimate(uls,-pic*1366);

		if(pic == uls.children.length-1){
			sps[0].className = "bgred";
			sps[sps.length-1].className = "";
		}else{
			for(var i = 0;i<sps.length;i++){
			sps[i].className = "";
		}
		sps[pic].className = "bgred";
		}
	}
	//角标移动
	for(var i=0;i<sps.length;i++){
		sps[i].setAttribute('index',i);
		sps[i].onmouseenter = function(){
			for(var k = 0;k<sps.length;k++){
				sps[k].className = "";
			}
			this.className = "bgred";

			pic = this.getAttribute('index');
			uls.style.left = -pic * 1366 + "px";
		}
	}


	//广告
	var ad_list = document.querySelectorAll('.ad_list img');
	console.log(ad_list);
	for(var i=0;i<ad_list.length;i++){
		ad_list[i].onmouseenter = function(){
			animate(this,{'top':-10},30);
			this.style.boxShadow = "2px 5px 3px #aaa";
		}
		ad_list[i].onmouseleave = function(){
			animate(this,{'top':0},30);
			this.style.boxShadow = "";
		}
	}

	//电竞专区
	var produce_list = document.querySelectorAll(".produce_list");
	var add = document.querySelectorAll(".produce_list .add");
	var add_btn = document.querySelectorAll(".all_produce .produce_list .add a.btn span");
	console.log(add_btn)
	var produce_img = document.querySelector('.produce_img').children[0];
	console.log(produce_img);
	for(var i = 0;i<produce_list.length;i++){
		produce_list[i].onmouseenter = function(){
			animate(this,{'top':-10},20);
			this.style.boxShadow = "2px 5px 3px #aaa";
			animate(this.lastElementChild,{'height':100,'display':'block'},20);
		}
		produce_list[i].onmouseleave = function(){
			animate(this,{'top':0},20);
			this.style.boxShadow = "";
			animate(this.lastElementChild,{'height':0,'display':'none'},20);
		}
	}

	produce_img.onmouseenter = function(){
		animate(this,{'top':-10},20);
		this.style.boxShadow = "2px 5px 3px #aaa";
	}

	produce_img.onmouseleave = function(){
		animate(this,{'top':0},20);
		this.style.boxShadow = "";
	}

	//商务合作
	var hezuo = document.querySelector('.hezuo');
	var tip = document.querySelector('.hezuo .tip');
	var online = document.querySelector('.contact a');
	console.log(hezuo);
	online.onmouseenter = function(){
		this.style.backgroundColor = "#e32332";
		this.style.color = "white";
	}
	online.onmouseleave = function(){
		this.style.backgroundColor = "";
		this.style.color = "#e32332";
	}

	hezuo.onmouseenter = function(){
		animate(tip,{'line-height':24,'display':'block'},40);
	}
	hezuo.onmouseleave = function(){
		animate(tip,{'line-height':0,'display':'none'},40);
	}
	

	//底下轮播图
	var btinner = document.querySelector('.partners .picScroll-left .bd .tempWrap');
	var btimgWidth = btinner.offsetWidth;
	console.log(btimgWidth);
	var btnum = document.querySelectorAll('.picScroll-left .bd .tempWrap .square span');
	console.log(btnum);
	var btul = document.querySelector('.partners .picScroll-left .bd .tempWrap ul');
	var timer2 = null;
	timer2 = setInterval(btlunbo,4000);

	btul.onmouseenter = function(){
		clearInterval(timer2);
	}
	btul.onmouseleave = function(){
		timer2 = setInterval(btlunbo,4000);
	}

	var lunbopic = 0;
	function btlunbo(){
		 if(lunbopic==0){
		 	lunbopic++;
			lunboanimate(btul,-lunbopic*btimgWidth,15);
			for(var k = 0;k<btnum.length;k++){
				btnum[k].className = "";
			}
			btnum[lunbopic].className = "square_current";
		 }
		 else if(lunbopic == 1){
		 	lunbopic--;
		 	lunboanimate(btul,-lunbopic*btimgWidth,15);
		 	for(var k = 0;k<btnum.length;k++){
				btnum[k].className = "";
			}
		 	btnum[lunbopic].className = "square_current";
		 }

	}

	for(var i = 0;i<btnum.length;i++){
		btnum[i].setAttribute('index',i);
		btnum[i].onmouseenter = function(){
			for(var k = 0;k<btnum.length;k++){
				btnum[k].style.backgroundColor = "";
			}
			this.style.backgroundColor = "#eee";
			lunbopic = this.getAttribute('index');
			btul.style.left = -lunbopic*btimgWidth + "px";
			// console.log(111);
		}
	}




	//小轮播动画函数
	function lunboanimate(element, target,time) {
	    //清除定时器
	    clearInterval(element.timeId)
	    //element.timeId 定时器的名字
	    element.timeId = setInterval(function () {
	        //获取元素的一个当前left位置 
	        var current = element.offsetLeft
	        //要移动的步伐
	        var step = 10;
	        //目标位置跟当前位置的一个大小区分
	        step = current > target ? -step : step;

	        current += step  //current = current + step
	        //current-target 相差的距离
	        if (Math.abs(current - target) > Math.abs(step)) {
	            element.style.left = current + 'px'
	        } else {
	            clearInterval(element.timeId)
	            element.style.left = target + 'px'
	        }
	        // if(current>=target){
	        //   clearInterval(element.timeId)
	        // }
	        // element.style.left = current+'px'

	    },time)
	}

	// 变速动画函数
	function getStyle(ele,str){
		if(window.getComputedStyle){
			return getComputedStyle(ele,null)[str];
		}else{
			return ele.currentStyle[str];
		}
	}
	function animate(ele,json,time,fn){
		clearInterval(ele.timeId);
		// console.log(111);
		ele.timeId = setInterval(function(){
			var flag = true;
			for(var key in json){
				if(key == 'opacity'){
					var current = getStyle(ele,key)*100;
					var target = json[key]*100;
					var step = (target - current)/10;
					step = step>0?Math.ceil(step):Math.floor(step);
					current += step;
					ele.style[key] = current/100;
				}else if(key == "zIndex"){
					ele.style[key] = json[key];
				}else if(key == 'display'){
					ele.style[key] = json[key];
				}else{
					var current = parseInt(getStyle(ele,key));
					var target = json[key];
					var step = (target-current)/10;
					step = step>0?Math.ceil(step):Math.floor(step);
					current += step;
					ele.style[key] = current + "px";
					}
					if(current!=target){
						flag=false;
					}
				}
			if(flag){
				clearInterval(ele.timeId);
				if(fn){
					fn();
				}
			}
		},time);
	}


//返回顶部
var goTop = document.querySelector('.fixed_bar .go_top');
window.onload = function() {
    window.onscroll = function() {
        if(document.documentElement.scrollTop>0){
            goTop.style.display = 'block'
        }else{
            goTop.style.display = 'none'
        }
        leader = document.documentElement.scrollTop;  // 把 卷去的头部 给  起始位置
        console.log(leader);
    }
    var leader = 0,target = 0,timer10 = null;
    // leader 起始位置  target  目标位置
    goTop.onclick = function() {
        target = 0;  //  点击完毕之后 奔向0 去的  不写也可以
        timer10 = setInterval(function() {
            leader = leader + (target - leader ) / 10;
            window.scrollTo(0,leader);  // 去往页面中的某个位置
            if(leader == target)
            {
                clearInterval(timer10);
            }
        },20);
    }
}

goTop.onmouseenter = function(){
	this.style.backgroundColor = "#e32332";
}
goTop.onmouseleave = function(){
	this.style.backgroundColor = "";
}